<!--
//
// GCharts.vue
// ShouChiPC
//
// Created by 区区电脑 on 2023/07/13.
//
-->
<template>
    <div class="GCharts">
        <div ref="chartsDom" class="chart-content"></div>
        <template v-if="!hideEmpty">
            <el-empty class="empty" v-if="!option || !option.series || option.series.length === 0" description="没有数据"/>
        </template>
    </div>

</template>

<script setup>
import {ref, reactive, computed, onMounted, watch} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const props = defineProps({option: {type: Object, default: () => {}}, hideEmpty: {type: Boolean, default: () => false}});
const emits = defineEmits(["ready"]);

// 路由
const router = useRouter();
// store
const store = useStore();

const app = {
    charts: null
}

const optionStr = computed(() => JSON.stringify(props.option))

watch(() => optionStr.value, () => {
    setOption()
})


function setOption() {
    clear()
    app.charts?.setOption(props.option)
    app.charts?.resize()
}

function clear() {
    app.charts?.clear()
}

const chartsDom = ref();
onMounted(async () => {
    await $sleep(300)
    app.charts = $echarts.init(chartsDom.value);
    setOption()
    emits("ready", app.charts);
    window.$addLowResize(() => {
        app.charts?.resize()
    })
})

defineExpose({
    clear
})

</script>

<style scoped lang="scss">
.GCharts {
    width: 100%;
    height: 100%;
    position: relative;
    .chart-content {
        width: 100%;
        height: 100%;
    }
    .empty {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
</style>
